<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="fun()">启动</button>
    <button class="xh">销毁</button>

    <div class="box">12312235251244312</div>
    <script>
        //行内式写法
        // function fun(x) {
        //     console.log(this);
        //     console.log(x);
            
            
            
        // }
        let body =document.querySelector("body")



        // let a = 0
        // let b = 1
        // body.innerHTML += `<p onclick='fun(${a})'>xcxxxxxxxx</p><p onclick='fun(${b})'>xcxxxxxxxx</p>`




        //常规
        // let btn =document.querySelector("button")
        // btn.onclick = function () {
            
        // }




        //事件监听
        //添加事件监听
        // addEventListener(事件类型(click),事件处理函数(fn()),事件传递机制(有里往外，还是由外往里))
        // 节点.addEventListener()

        let box = document.querySelector(".box")
        // box.addEventListener('click',function () {
        //     console.log("不要戳我");
        // })
        // box.addEventListener('click',fn)
        // function fn() {
        //     console.log("烦人滚啊");
        // }

        //销毁监听
        // removeEventListener
        // box.removeEventListener("要删除的事件监听")
        box.addEventListener('mouseenter',text)
        function text() {
            console.log(2222222222);
        }
        let reset = document.querySelector(".xh")
        reset.onclick = function(){
            box.removeEventListener("mouseenter",text)
            //删除box的鼠标移入事件
        }

        



    </script>
    
</body>
</html>